<!DOCTYPE html>
<html>
<head>
<title>{$name} {$seo_title} {$site_name}</title>
<meta name="keywords" content="{$seo_keywords}" />
<meta name="description" content="{$seo_description}">
<tc_include file="Public:head" />
</head>
<body>
	<tc_include file="Public:nav" />
	<div class="container">
		<h2>{$name}</h2>

		<php> $lists = sp_sql_posts_paged("cid:$cat_id;order:post_date DESC;",20); </php>
		<div id="container">
			<div class="grid-sizer"></div>
			<volist name="lists['posts']" id="vo">
			<php>
			$smeta=json_decode($vo['smeta'], true);
			</php>

			<div class="item">
				<div class="tc-gridbox">
					<div class="header">

						<if condition="!empty($smeta['thumb'])">
						<div class="item-image">
							<a href="{:leuu('article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}">
								<img src="{:sp_get_asset_upload_path($smeta['thumb'])}"
								class="img-responsive" alt="{$vo.post_title}">
							</a>
						</div>
						<else />
						</if>

						<h3>
							<a href="{:leuu('article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}">{$vo.post_title}</a>
						</h3>
						<hr>
					</div>
					<div class="body">
						<a href="{:leuu('article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}">{$vo.post_excerpt|msubstr=0,256}</a>
					</div>
					<div class="footer">
						<div class="pull-left">
							<span class="meta">{$vo.post_date}</span>
						</div>
						<div class="pull-right">
							<a href="javascript:;"><i class="fa fa-eye"></i><span>{$vo.post_hits}</span></a>
							<a href="{:U('article/do_like',array('id'=>$vo['object_id']))}" class="js-count-btn"><i class="fa fa-thumbs-up"></i><span class="count">{$vo.post_like}</span></a> 
							<a href="{:U('user/favorite/do_favorite',array('id'=>$vo['object_id']))}" class="js-favorite-btn" data-title="{$vo.post_title}" data-url="{:leuu('portal/article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}" data-key="{:sp_get_favorite_key('posts',$vo['object_id'])}">
								<i class="fa fa-star-o"></i>
							</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			</volist>
		</div>
		<!-- <div class="pagination"><ul>{$lists['page']}</ul></div> -->
		<div class="js-infinite-scroll-loading text-center" style="display: none;">正在加载...</div>
		<div id="nextpage"></div>
		<tc_include file="Public:footer" />
	</div>

	<!-- JavaScript -->
	<tc_include file="Public:scripts" />
	<script src="__TMPL__Public/assets/js/imagesloaded.pkgd.min.js"></script>
	<script src="__TMPL__Public/assets/js/masonry.pkgd.min.js"></script>
	<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>
	<script>
		
		$(function(){
			var $container= $('#container').masonry({
				columnWidth : '.grid-sizer',
				itemSelector : '.item'
			});
			
			$container.imagesLoaded().progress(function (imgLoad, image) {
				var msnry = $container.data('masonry');
				var itemSelector = msnry.options.itemSelector;
		        var $item = $(image.img).parents(itemSelector);
		        $('.tc-gridbox',$item).css('opacity',1);
		        msnry.layout();
		    });
			
			$('#nextpage').infiniteScroll({
				loading:'.js-infinite-scroll-loading',
				total_pages:{$lists['total_pages']},
				success:function(content){
					var $items=$(content).find('#container .item');
					if($items.length>0){
						//$('.tc-gridbox',$items).css('opacity',1);
						$container.append( $items )
					    // add and layout newly prepended items
					    .masonry( 'appended', $items );
						$items.imagesLoaded().progress(function (imgLoad, image) {
							var msnry = $container.data('masonry');
							var itemSelector = msnry.options.itemSelector;
					        var $item = $(image.img).parents(itemSelector);
					        $('.tc-gridbox',$item).css('opacity',1);
					        msnry.layout();
					    });
					}
				},
				finish:function(){
					
				}
			});
		});
		
		
		
		
	</script>
</body>
</html>